<template>
  <div class="tpl45-title">
    
    <section
      :style="`padding-top:${tplItemData.modulePadding || 5}px; padding-bottom:${tplItemData.modulePadding || 5}px;`"
      class="modulePadding">
      <section class="members_nav62">
        <ul>
          <li v-for="(item, index) in tplItemData.dataset" :key="index">
            <a @click="openLink(item.link)"><span class="j-title">{{ item.title }}</span><span class="j-showtitle">{{ item.showtitle }}</span></a>
          </li>
        </ul>
      </section>
    </section>
    
  </div>
</template>

<script>
  import Vue from 'vue'
  import { openPage } from '@/utils/utils'
  export default Vue.extend({
    name: 'index',
    props: {
      tplItemData: {
        type: Object
      }
    },
    methods: {
      // TODO 小程序跳转
      openLink(link) {
          openPage(link)
      },
    }
  })
</script>

<style lang="scss">
  .tpl45-title{
    .members_nav62{
      width: 100%;
      overflow: hidden;
      li{
        background: #fff;
        height: 90px;
        line-height: 90px;
        .j-title{
          display: block;
          float: left;
          color: #333;
          font-size: 30px;
          margin-left: 4px;
        }
        .j-showtitle{
          display: block;
          float: right;
          color: #ff3c25;
          font-size: 26px;
          margin-right: 10px;
        }
      }
    }
    .members_nav62 a{
      display: block;
    }
  }
</style>
